<template>
  <div class="warp-table">
    <div class="table-con">
      <div class="left-content">
        <div class="content-item item-header">用户等级</div>
        <div class="content-item selected">
          <span></span><span class="text">Lv.1</span>
        </div>
        <div class="content-item"><span class="text">Lv.2</span></div>
        <div class="content-item">
          <span class="text">Lv.3</span>
        </div>
        <div class="content-item"><span class="text">Lv.4</span></div>
        <div class="content-item"><span class="text">Lv.5</span></div>
      </div>
      <div class="right-content">
        <div class="right-column">
          <div class="content-item item-header">OKB 总持有量</div>
          <div class="content-item selected">
            <span></span><span class="text">&lt; 500</span>
          </div>
          <div class="content-item"><span class="text">≥ 500</span></div>
          <div class="content-item"><span class="text">≥ 1,000</span></div>
          <div class="content-item"><span class="text">≥ 1,500</span></div>
          <div class="content-item"><span class="text">≥ 2,000</span></div>
        </div>
        <div class="right-column no-border">
          <div class="content-item item-header">资产量 (USD)</div>
          <div class="content-item selected">
            <span></span><span class="text">&lt; 100,000</span>
          </div>
          <div class="content-item"><span class="text">&lt; 100,000</span></div>
          <div class="content-item"><span class="text">&lt; 100,000</span></div>
          <div class="content-item"><span class="text">&lt; 100,000</span></div>
          <div class="content-item"><span class="text">&lt; 100,000</span></div>
        </div>
        <div class="right-column no-border thin">
          <div class="content-item item-header thin">或</div>
          <div class="content-item selected light">
            <span></span><span class="text">/</span>
          </div>
          <div class="content-item light"><span class="text">/</span></div>
          <div class="content-item light"><span class="text">/</span></div>
          <div class="content-item light"><span class="text">/</span></div>
          <div class="content-item light"><span class="text">/</span></div>
        </div>
        <div class="right-column undefined">
          <div class="content-item item-header">近 30 天交易量 (USD)</div>
          <div class="content-item selected">
            <span></span><span class="text">&lt; 10,000,000</span>
          </div>
          <div class="content-item"><span class="text">&lt; 10,000,000</span></div>
          <div class="content-item"><span class="text">&lt; 10,000,000</span></div>
          <div class="content-item"><span class="text">&lt; 10,000,000</span></div>
          <div class="content-item"><span class="text">&lt; 10,000,000</span></div>
        </div>
        <div class="right-column">
          <div class="content-item item-header">挂单成交手续费</div>
          <div class="content-item selected">
            <span></span><span class="text">0.080%</span>
          </div>
          <div class="content-item"><span class="text">0.075%</span></div>
          <div class="content-item"><span class="text">0.070%</span></div>
          <div class="content-item"><span class="text">0.065%</span></div>
          <div class="content-item"><span class="text">0.060%</span></div>
        </div>
        <div class="right-column">
          <div class="content-item item-header">吃单成交手续费</div>
          <div class="content-item selected">
            <span></span><span class="text">0.100%</span>
          </div>
          <div class="content-item"><span class="text">0.095%</span></div>
          <div class="content-item"><span class="text">0.090%</span></div>
          <div class="content-item"><span class="text">0.085%</span></div>
          <div class="content-item"><span class="text">0.080%</span></div>
        </div>
        <div class="right-column">
          <div class="content-item item-header">24 小时提现额度 (BTC)</div>
          <div class="content-item selected">
            <span></span><span class="text">500</span>
          </div>
          <div class="content-item"><span class="text">500</span></div>
          <div class="content-item"><span class="text">500</span></div>
          <div class="content-item"><span class="text">500</span></div>
          <div class="content-item"><span class="text">500</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.warp-table {
  * {
    box-sizing: content-box;
  }
  margin: 15px;
  border: thin solid #ebebeb;
}
.table-con {
  width: 100%;
  display: flex;
  position: relative;
  .content-item {
    align-items: center;
    color: #000;
    display: flex;
    font-size: 12px;
    height: 36px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    &.selected {
      background: #f5f9ff;
      color: #0569ff;
      font-weight: 500;
    }
  }
  .left-content,
  .right-content {
    .content-item {
      text-align: left;
      &:not(:last-child) {
        border-bottom: thin solid #ebebeb;
      }
    }
  }
  .left-content {
    min-width: 65px;
    border-right: thin solid #ebebeb;
    .content-item {
      &.item-header {
        text-align: center;
        color: #929292;
        padding: 0 8px;
        &.thin {
          padding: 0;
        }
      }
      &.selected {
        &:after {
          //   content: "\eb94";
          //   font-family: iconfont !important;
          //   font-size: 12px;
          //   padding-left: 4px;
        }
        &:before {
          content: " ";
          border: solid 1px #0569ff;
          display: block;
          height: 36px;
          left: -1px;
          right: -1px;
          pointer-events: none;
          position: absolute;
          z-index: 1;
        }
      }
    }
  }
  .right-content {
    display: flex;
    flex: 1 1;
    overflow-x: auto;
    overflow-y: hidden;
    .right-column {
      flex-grow: 1;
      &:not(:last-child) {
        border-right: thin solid #ebebeb;
      }
      .content-item {
        &.item-header {
          text-align: center;
          color: #929292;
          padding: 0 8px;
          &.thin {
            padding: 0;
          }
        }
      }
      &.thin {
        flex-grow: 0;
      }
      &.no-border {
        border-right: none;
      }
    }
    &::-webkit-scrollbar {
      background: #f5f6fa;
      height: 8px;
    }
    &::-webkit-scrollbar-track {
      background: #f5f6fa;
    }
    &::-webkit-scrollbar-thumb {
      background: #e9ebf2;
      border-radius: 4px;
    }
  }
}
@media (max-width: 767px) {
  .table-con {
    .left-content {
      box-shadow: 8px 0 8px -8px rgba(31, 37, 51, 0.2);
    }
  }
}
</style>
